<!--
 * @Author: Abdusalam0126 2383624944@qq.com
 * @Date: 2025-08-05 13:23:22
 * @LastEditors: Abdusalam0126 2383624944@qq.com
 * @LastEditTime: 2025-08-05 16:24:50
 * @FilePath: src/pages/auth/login.vue
 * @Description: 微信一键登录页面
 -->
<script lang="ts" setup>
import {onMounted, ref} from 'vue'
import {useUserStore} from '@/stores/user'

const userStore = useUserStore()
const loading = ref(false)

// 微信一键登录
const wechatLogin = async () => {
  if (loading.value) return

  try {
    loading.value = true

    // 获取微信登录code
    const loginResult = await uni.login({
      provider: 'weixin'
    })
    if (loginResult.code) {
      await userStore.login(loginResult.code)

      uni.showToast({
        title: '登录成功',
        icon: 'success',
        duration: 2000
      })

      // 延迟跳转，让用户看到成功提示
      setTimeout(() => {
        uni.switchTab({
          url: '/pages/profile/index'
        })
      }, 500)

    } else {
      throw new Error('获取微信登录code失败')
    }

  } catch (error) {
    console.error('微信登录失败:', error)

    // 显示具体错误信息
    let errorMsg = '登录失败'
    if (error instanceof Error) {
      errorMsg = error.message
    } else if (typeof error === 'string') {
      errorMsg = error
    }

    uni.showToast({
      title: errorMsg,
      icon: 'none',
      duration: 3000
    })
  } finally {
    loading.value = false
  }
}

// 检查是否已登录
const checkLoginStatus = () => {
  if (userStore.isLoggedIn) {
    uni.switchTab({
      url: '/pages/home/index'
    })
  }
}

// 页面加载时检查登录状态
onMounted(() => {
  userStore.init()
  checkLoginStatus()
})
</script>

<template>
  <view class="login-container">
    <!-- 背景装饰 -->
    <view class="bg-decoration">
      <view class="circle circle-1"></view>
      <view class="circle circle-2"></view>
      <view class="circle circle-3"></view>
    </view>

    <!-- 主要内容 -->
    <view class="login-content">
      <!-- Logo区域 -->
      <view class="logo-section">
        <view class="logo-container">
          <image class="logo" mode="aspectFit" src="/static/logo.png"></image>
        </view>
        <text class="app-name">维吾尔语学习</text>
        <text class="app-subtitle">ئۇيغۇر تىلىنى ئۆگىنىش</text>
      </view>

      <!-- 登录按钮区域 -->
      <view class="login-section">
        <button
            :disabled="loading"
            class="login-btn"
            @click="wechatLogin"
        >
          <view class="btn-content">
            <image class="wechat-icon" mode="aspectFit" src="/static/wechat-icon.png"></image>
            <text class="btn-text">{{ loading ? '登录中...' : '微信一键登录' }}</text>
          </view>
        </button>

        <text class="login-tip">点击按钮使用微信账号快速登录</text>
      </view>

      <!-- 底部信息 -->
      <view class="footer">
        <text class="footer-text">登录即表示同意</text>
        <text class="footer-link">《用户协议》</text>
        <text class="footer-text">和</text>
        <text class="footer-link">《隐私政策》</text>
      </view>
    </view>
  </view>
</template>

<style scoped>
.login-container {
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  overflow: hidden;
}

/* 背景装饰 */
.bg-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.circle-1 {
  width: 200rpx;
  height: 200rpx;
  top: 10%;
  right: -50rpx;
}

.circle-2 {
  width: 150rpx;
  height: 150rpx;
  top: 60%;
  left: -30rpx;
}

.circle-3 {
  width: 100rpx;
  height: 100rpx;
  bottom: 20%;
  right: 20%;
}

/* 主要内容 */
.login-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 100rpx 60rpx 80rpx;
}

/* Logo区域 */
.logo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 100rpx;
}

.logo-container {
  width: 160rpx;
  height: 160rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40rpx;
}

.logo {
  width: 120rpx;
  height: 120rpx;
}

.app-name {
  font-size: 48rpx;
  font-weight: bold;
  color: white;
  margin-bottom: 20rpx;
}

.app-subtitle {
  font-size: 32rpx;
  color: rgba(255, 255, 255, 0.8);
}

/* 登录区域 */
.login-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-btn {
  width: 100%;
  height: 100rpx;
  background: #07c160;
  border: none;
  border-radius: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30rpx;
  transition: all 0.3s ease;
}

.login-btn:active {
  transform: scale(0.98);
  background: #06ad56;
}

.login-btn:disabled {
  opacity: 0.6;
  transform: none;
}

.btn-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wechat-icon {
  width: 40rpx;
  height: 40rpx;
  margin-right: 20rpx;
}

.btn-text {
  font-size: 32rpx;
  color: white;
  font-weight: 500;
}

.login-tip {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
}

/* 底部 */
.footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 8rpx;
}

.footer-text {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.6);
}

.footer-link {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: underline;
}
</style>